<template>
	<view class="container">

		<!-- 维修信息卡片 -->
		<view class="info-card">
			<view class="section-title">维修信息</view>
			<view class="info-list">
				<view class="info-item d jb">
					<text class="label">维修单号:</text>
					<text class="value">{{ maintenanceInfo.orderNumber }}</text>
				</view>
				<view class="info-item d jb">
					<text class="label">车主姓名:</text>
					<text class="value">{{ maintenanceInfo.ownerName }}</text>
				</view>
				<view class="info-item d jb">
					<text class="label">联系方式:</text>
					<view class="value d ac">
						<text>{{ maintenanceInfo.phone }}</text>
						<image src="/static/icons/phone.png" class="action-icon" @click="handleCall"></image>
					</view>
				</view>
				<view class="info-item d jb">
					<text class="label">维修方式:</text>
					<text class="value">{{ maintenanceInfo.repairType }}</text>
				</view>
				<view class="info-item d jb">
					<text class="label">取车位置:</text>
					<view class="value d ac">
						<text>{{ maintenanceInfo.location }}</text>
						<image src="/static/icons/location.png" class="action-icon" @click="handleLocation"></image>
					</view>
				</view>
				<view class="info-item d jb">
					<text class="label">预约日期:</text>
					<text class="value">{{ maintenanceInfo.appointmentDate }}</text>
				</view>
				<view class="info-item d jb">
					<text class="label">提交日期:</text>
					<text class="value">{{ maintenanceInfo.submitDate }}</text>
				</view>
				<view class="info-item d jb" v-if="hasArrived">
					<text class="label">到场时间:</text>
					<text class="value">{{ maintenanceInfo.arrivalTime }}</text>
				</view>
			</view>
		</view>

		<!-- 车辆信息卡片 -->
		<view class="info-card">
			<view class="section-title">车辆信息</view>
			<view class="info-list">
				<view class="info-item d jb">
					<text class="label">车辆类型:</text>
					<text class="value">{{ maintenanceInfo.vehicleType }}</text>
				</view>
				<view class="info-item d jb">
					<text class="label">车牌号:</text>
					<text class="value">{{ maintenanceInfo.licensePlate }}</text>
				</view>
				<view class="info-item d fd">
					<text class="label">整车照片:</text>
					<view class="image-preview">
						<image src="/static/images/car.png" mode="aspectFit" @click="previewImage('/static/images/car.png')"></image>
					</view>
				</view>
				<view class="info-item d fd">
					<text class="label">维修部位照片:</text>
					<view class="repair-images d">
						<image 
							v-for="(item, index) in 3" 
							:key="index" 
							src="/static/images/car.png" 
							mode="aspectFit"
							@click="previewImage('/static/images/car.png')"
						></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-button">
			<button 
				:class="['confirm-btn d jc ac', hasArrived ? 'btn-arrived' : '']" 
				@click="confirmArrival"
				:disabled="hasArrived"
			>
				{{ hasArrived ? '已到场' : '确认到场' }}
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 维修信息数据
const maintenanceInfo = ref({
	orderNumber: '',
	ownerName: '张',
	phone: '199382928',
	repairType: '',
	location: '山阳区32号',
	appointmentDate: '',
	submitDate: '2022/11/08 12:34',
	vehicleType: '大客车',
	licensePlate: '豫J45323',
	arrivalTime: ''
});

// 是否已到场
const hasArrived = ref(false);

// 获取路由参数
onMounted(() => {
	const pages = getCurrentPages();
	const currentPage = pages[pages.length - 1];
	const { orderNumber, status, repairType, appointmentDate } = currentPage.$page.options;
	
	maintenanceInfo.value = {
		...maintenanceInfo.value,
		orderNumber,
		repairType,
		appointmentDate
	};
});

// 确认到场
const confirmArrival = () => {
	if (hasArrived.value) return;
	
	const now = new Date();
	const arrivalTime = `${now.getFullYear()}/${String(now.getMonth() + 1).padStart(2, '0')}/${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
	
	maintenanceInfo.value.arrivalTime = arrivalTime;
	hasArrived.value = true;
	
	uni.showToast({
		title: '已确认到场',
		icon: 'success'
	});
};

// 拨打电话
const handleCall = () => {
	uni.makePhoneCall({
		phoneNumber: maintenanceInfo.value.phone
	});
};

// 打开位置
const handleLocation = () => {
	// 这里可以添加打开地图的逻辑
	uni.showToast({
		title: '打开位置',
		icon: 'none'
	});
};

// 预览图片
const previewImage = (url) => {
	uni.previewImage({
		urls: [url],
		current: url
	});
};
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx;
	padding-top: var(--status-bar-height);
}

.nav-header {
	background-color: #2b7ff3;
	color: #fff;
	padding: 20rpx 32rpx;
	position: relative;
	height: 88rpx;

	.back-icon {
		position: absolute;
		left: 32rpx;
		width: 48rpx;
		height: 48rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: 500;
	}

	.right-icons {
		position: absolute;
		right: 32rpx;
		gap: 20rpx;

		image, img {
			width: 48rpx;
			height: 48rpx;
		}
	}
}

.info-card {
	background-color: #fff;
	border-radius: 20rpx;
	margin: 20rpx;
	padding: 30rpx;

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		color: #333;
	}

	.info-list {
		.info-item {
			margin-bottom: 24rpx;

			.label {
				color: #666;
				font-size: 28rpx;
				min-width: 140rpx;
			}

			.value {
				color: #333;
				font-size: 28rpx;

				.action-icon {
					width: 36rpx;
					height: 36rpx;
					margin-left: 16rpx;
				}
			}
		}
	}
}

.image-preview {
	margin-top: 20rpx;
	
	image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
	}
}

.repair-images {
	margin-top: 20rpx;
	gap: 20rpx;
	flex-wrap: wrap;

	image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
	}
}

.bottom-button {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx;
	background-color: #fff;

	.confirm-btn {
		background-color: #2b7ff3;
		color: #fff;
		border-radius: 45rpx;
		font-size: 32rpx;
		height: 88rpx;
		border: none;
		width: 100%;

		&::after {
			border: none;
		}

		&:active {
			opacity: 0.9;
		}

		&.btn-arrived {
			background-color: #999;
			color: #fff;
		}
	}
}
</style> 